<template>
    <TransitionRoot appear :show="visible">
        <div class="fixed inset-0 z-40 ">
            <TransitionChild class="absolute inset-0 transition-opacity duration-300 ease-linear bg-black/30"
                enter-from="opacity-0" enter-to="opacity-100" leave-from="opacity-100" leave-to="opacity-0">
            </TransitionChild>
            <TransitionChild class="relative z-50 flex flex-col h-full transition-all duration-300 ease-linear "
                enter-from="top-full" enter-to="top-0" leave-from="top-0" leave-to="top-full">
                <div class="grow" @click="close"></div>
                <slot class="shrink-0" />
            </TransitionChild>
        </div>
    </TransitionRoot>
</template>
    
<script setup lang='ts'>
import { TransitionRoot, TransitionChild } from '@headlessui/vue'
const visible = ref(false);;
const open = () => visible.value = true;
const close = () => visible.value = false;

defineExpose({
    visible,
    open,
    close
})
</script>
    
<style></style>